<template>
	<view class="content" style="padding-bottom:182rpx">
        <u-navbar :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="新增人员进场">
        </u-navbar>

        <view class="uni-area">
            <!-- 进场时间 -->
            <view class="u-m-t-50" >
                <text class="u-font-32 font-bold">进场时间</text>
                <view class="u-m-t-20" @tap.stop="showDatetime=saveResult.id?false:true">
                    <u--input disabled 
                        fontSize="28rpx" prefixIcon="calendar" prefixIconStyle="font-size:48rpx;color:#909399"
                        v-model="submitData.pqrq">
                    </u--input>
                </view>
            </view>

            <!-- 进场人员 -->
            <view v-if="saveResult.id" class="u-m-t-50">
                <view class="u-flex u-row-between u-font-28">
                    <text class="u-font-32 font-bold">进场人员</text>
                    <text class="uni-higt-color" @tap.stop="menuSkip('/pages/member-bag/list?type=enter&ywbh='+saveResult.id)">选择进场人员</text>
                </view>
                <u-row class="u-flex u-flex-wrap u-m-t-30 uni-shadow u-p-t-10" style="position:relative;"
                    v-for="(tem,ind) in staffs" :key="ind">
                    <text class="remove" @tap.stop="remove(tem[0].value)">移出</text>
                    <u-col class="u-m-t-20 u-font-26" style="flex-direction:row" 
                        v-for="(item,index) in tem" :key="index" :span="item.span">
                        <text class="u-m-r-20 u-line-1 uni-dec-color">{{item.title}}</text>
                        <uni-phone v-if="item.type=='phone'" :phone="item.value" size="13"/>
                        <text v-else class="u-line-1" :style="{maxWidth:item.span==12?'78%':'70%'}" 
                            @longtap="longTap(item.value)">{{item.value}}
                        </text>
                    </u-col>
                </u-row>
            </view>


            <!-- 附件 -->
            <uni-accessory v-if="saveResult.id" class="u-m-t-50" :title="{title:'附件'}" :accessorys="accessoryList"
                :upload="true" :uploadParameter="uploadParameter" @uploadSucceed="uploadSucceed">
            </uni-accessory>
        </view>

        <!-- 底部操作 -->
        <view class="uni-bottom u-flex u-row-between">
            <u-button class="btn3" text="取消" @tap="back"></u-button>
            <u-button class="btn4" type="primary" :text="saveResult.id?'修改':'保存'" @tap="saveEdit"> </u-button>
        </view>


        <!-- 时间选择 -->
        <u-datetime-picker
            :show="showDatetime"
            :value="submitData.pqrq"
            mode="datetime"
            :formatter="formatter"
            closeOnClickOverlay
            @cancel="showDatetime=false"
            @close="showDatetime=false"
            @confirm="confirm">
        </u-datetime-picker>
	</view>
</template>

<script>
import {mapGetters,mapMutations} from 'vuex'
export default {
    data() {
        return {
            userInfo: uni.getStorageSync("userInfo"), // 用户信息
            showDatetime: false,
            submitData:{ // 业务保存参数
                bdbh: uni.getStorageSync("userInfo").ssgcbh,  // 标段编号==项目编号
                gcbh: uni.getStorageSync("userInfo").ssgcbh, // 项目编号
                gcmc: uni.getStorageSync("userInfo").ssgcmc, // 项目名称
                pqrq: this.$moment().format('YYYY-MM-DD HH:mm'), // 进场日期
                pqrs: 0, // 进场人数
                procDefKey: 'salary_smzgl_pqxx',
                qybh: uni.getStorageSync("userInfo").ssqybh, // 企业编号
                qymc: uni.getStorageSync("userInfo").ssqymc, // 企业名称
                sgdwQymc: '', // 施工单位企业名称
                sgxkzh: '', // 施工许可编号
                sjly: '本系统',
                updateTime: this.$moment().format('YYYY-MM-DD HH:mm:ss'), // 提交时间
                updateUser: '',
                xmbh: uni.getStorageSync("userInfo").ssgcbh, // 企业编号
                xmmc: uni.getStorageSync("userInfo").ssgcmc, // 企业名称
            },
            saveResult:{}, // 业务保存结果
            staffItem: [ // 进场人员展示字段
                { field:'pqmxid', title:'ID', span:0, value:'' },
                { field:'xm', title:'姓名', span:6, value:'' },
                { field:'deptName', title:'所属单位', span:12, value:'' },
                { field:'zjhm', title:'证件号码', span:12, value: '513022202101011234'  },
                { field:'lxfs', title:'联系电话', span:6, value: '18302882468',type:'phone'  },
            ],
            staffs: [], // 人员明细
            accessoryList:[], // 附件
            uploadParameter: {// 上传附件的参数
                ywlx: 'salary_smzgl_pqxx',
            }, 
        }
    },

    computed: {
        ...mapGetters(['enterStaff']),
    },

    watch:{
        enterStaff(newVal,oldVal){
            if( newVal ) {
                this.enterBindMember()
            }
        }
    },


    onLoad(option) {
        if ( option.id ) {
            // 获取该业务详情=>已进场人员列表
            this.saveResult.id = option.id
            this.getDetail()
        }else{
            // 项目详情
            this.getProjectDetail()
        }
    },


    methods: {
        // 返回
        back(){
            uni.navigateBack()
        },
        // 跳转
        menuSkip(url){
            uni.navigateTo({ url: url })
        },
        // 过滤时间选择器
        formatter(type, value) {
            if (type === 'year') return `${value}年`
            if (type === 'month') return `${value}月`
            if (type === 'day')  return `${value}日`
            if (type === 'hour')  return `${value}时`
            if (type === 'minute')  return `${value}分`
            return value
        },


        // 项目详情
        getProjectDetail(){
            uni.showLoading({ title:'项目详情加载中' })
            const api = JSON.parse(JSON.stringify(this.$apis.ProjectDetail))
            api.url = api.url+'/'+this.userInfo.ssgcbh
            this.$request(this,api).then(res=>{
                // console.log('项目详情',res)
                this.submitData.sgdwQymc=res.constructionname, // 施工单位企业名称
                this.submitData.sgxkzh=res.sgxkzbh // 施工许可编号
                this.submitData.updateUser=this.userInfo.acc+'['+this.userInfo.userName+']'
            }).then()
        },
        // 进场时间
        confirm(e){
            this.submitData.pqrq = this.$moment(e.value).format('YYYY-MM-DD HH:mm')
            this.showDatetime = false
        },


        // 业务详情
        getDetail(){
            const api = JSON.parse(JSON.stringify(this.$apis.enterDetail))
            api.url += this.saveResult.id
            this.$request('this',api).then(res=>{
                // console.log('业务详情',res)
                this.saveResult = res
                this.submitData.pqrq = res.createTime
                this.submitData.updateUser = res.applyer
                this.submitData.sgdwQymc = res.sgdwQymc
                this.submitData.sgxkzh = res.sgxkzh
                // 当前业务进场人员列表
                this.getmemberEnterDeatilList()
                this.getAccessoryList()
            })
        },
        // 当前业务进场人员列表
        getmemberEnterDeatilList(){
            const pra = {
                searchTerminal: "PC",
                pqid: this.saveResult.id
            }
            this.$request(this,this.$apis.enterStaffDetailList,pra).then(res=>{
                const { rows } = res
                // console.log('人员明细',rows)
                const arr = []
                rows.map((a,b)=>{
                    const tem = JSON.parse(JSON.stringify(this.staffItem))
                    tem.map((v,i)=>{
                        v.value = a[v.field]
                    })
                    arr.push(tem)
                })
                this.staffs = arr
                this.submitData.pqrs = arr.length
            })
        },


        // 新增进场人员
        enterBindMember(){
            uni.showLoading({ title:'人员进场' })
            const pra = {
                searchTerminal: 'PC',
                ywbh: this.saveResult.id,
                remark: [this.enterStaff.id],
            }
            this.$request('this',this.$apis.enterAffirm,pra).then(res=>{
                this.getmemberEnterDeatilList()
            })
        },
        // 移出已入场的人员
        remove(ryid){
            uni.showLoading({ title:'移除中' })
            const api = JSON.parse(JSON.stringify(this.$apis.enterRemoveStaff))
            api.url+=ryid
            this.$request('this',api).then(res=>{
                this.getmemberEnterDeatilList()
            })
        },


        // 保存&修改
        saveEdit(){
            let api = JSON.parse(JSON.stringify(this.$apis.enterSaveEdit))
            this.submitData.updateTime = this.$moment().format('YYYY-MM-DD HH:mm:ss')
            let par = {}
            if( this.saveResult.id ) { // 修改
                api.type = 'PUT'
                par = Object.assign(this.saveResult,this.submitData)
            }else{
                api.type = 'POST'
                par = this.submitData
            }
            this.$request(this,api,par).then(res=>{
                if( this.saveResult.id ){
                    uni.$u.toast('修改成功',1500)
                    setTimeout(()=>{ this.back() },1500)
                }else{
                    // console.log('人员进场保存',res)
                    this.saveResult = res
                    this.getAccessoryList()
                }
            }).then()
        },


        // 附件列表
        getAccessoryList(){
            const parameter = {
                ywlx: this.uploadParameter.ywlx, // 业务类型
                ywbh: this.saveResult.id, // 业务编号
            }
            uni.showLoading({ title:'附件列表获取中' })
            this.$request(this,this.$apis.MemberAtta,parameter).then(res=>{
                this.accessoryList = res
                if( res ){
                    this.uploadParameter.bid = this.saveResult.id
                    this.uploadParameter.attachType = res[0].attachType
                }
            }).then()
        },
        // 上传附件成功
        uploadSucceed(){
            this.getAccessoryList()
        }
    }
}
</script>

<style scoped lang="scss">
    .content{
        // 文本域
        .textarea{
            border: none;
            padding: 40rpx 30rpx;
            background: #f4f5f7;
            border-radius: 16rpx;
            /deep/.uni-textarea-textarea{
                font-size: 28rpx !important;
            }
        }
        .remove{
            color: red;
            font-size: 26rpx;
            position: absolute;
            right: 30rpx;
            top: 30rpx;
        }
    }
</style>
